<template>
  <div class="center">
    <!-- 左侧标签 -->
    <div class="all">
      <div class="tabs">
        <div class="title">个人中心</div>
        <ul>
          <router-link tag="li" to="shopping_cart" :underline="false" active-class="current" class="tab">
            <i class="el-icon-shopping-cart-2"></i>购物车
          </router-link>
          <router-link tag="li" to="my_order" :underline="false" active-class="current" class="tab">
            <i class="el-icon-tickets"></i>我的订单
          </router-link>
          <router-link tag="li" to="basic_setting" :underline="false" active-class="current" class="tab">
            <i class="el-icon-setting"></i>基本设置
          </router-link>
        </ul>
      </div>
    <!-- 主内容路由 -->
      <div class="main"><router-view /></div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.center{
  .all{
    width: 1150px;
    height: 1000px;
    border: 1px lightgray solid;
    margin: 10px auto;
    .tabs{
        width: 250px;
        height: 100%;
        border-right: 1px lightgray solid;
        float: left;
      .title{
        font-size: 25px;
        padding: 40px 40px;
        text-align: center;
      }
      ul{
        list-style: none;
        .tab{
          padding: 20px 30px;
          font-size: 18px;
        }
        .current{
        color: #409eff;
        }
        .tab:hover {
        cursor: pointer;
      }
      }
    }
    .main{
      float: left;
    }
  }
}
</style>